<template>
    <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="150px" >
        <el-row>
          <el-col :span="12">
                <el-form-item label="小区" prop="area">
                    <el-input v-model="form.area"></el-input>
                 </el-form-item>
          </el-col>
          <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone"></el-input>
        </el-form-item>
        

        <el-form-item label="身份证*">
            <el-input v-model="form.idcard"></el-input>
        </el-form-item>
        <el-form-item label="家庭住址*">
            <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="车牌号*">
            <el-input v-model="form.carNum"></el-input>
        </el-form-item>

        <el-form-item label="是否健康">
        <el-radio-group v-model="form.isHealthy">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
        </el-radio-group>
        </el-form-item>
          <el-form-item label="体温">
          <el-input-number v-model="form.temper" :min="34" :max="42" ></el-input-number>
        </el-form-item>
        <el-form-item label="有无重点疫区旅居史*" label-width="150px">
            <el-radio-group v-model="form.history">
                <el-radio :label="0">无</el-radio>
                <el-radio :label="1">有</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
        <el-input type="textarea" v-model="form.desc" rows="4"></el-input>
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
        </el-form-item>
        </el-form>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          area:'',
          name: '',
          phone: '',
          idcard: '',
          address: '',
          carNum:'',
          isHealthy:1,
          temper:undefined,//数字类型没有默认值时，添undefined
          history:0,
          desc: '',
        },
        //
        rules:{ 
            name: [
                 { required: true, message: '请输入姓名', trigger: 'blur' },
                 { min: 1, max: 10, message: '长度在 1 到 15 个字符', trigger: 'blur' }
          ],
            area: [
                 { required: true, message: '请输入地址', trigger: 'blur' },
                 { max: 10, message: '长度不超过10 个字符', trigger: 'blur' }
          ],
           phone: [
                 { required: true, message: '请输入手机号', trigger: 'blur' },
                 { min: 11,max:11,  message: '请正确输入手机号', trigger: 'change' },
          ],
        }
      }
    },
    methods: {
      onSubmit(){
        console.log("submit!")
        this.$refs["form"].validate((valid) => {//箭头函数valid参数，相当于匿名函数简化写法
          if (valid) {//形参值为true，说明验证通过，校验通过，符合所有得校验规则
           this.$message({
          message: '提交成功',
          type: 'success'
          }); //演示，真正得代码要通过axios发ajax请求到服务器
          } else {//说明校验未通过，不符合莫一校验规则
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
  }
</script>